<template>
    <div class="main">
        <section class="aside-left">
            <div class="user-info">
                <div class="avatar">
                    <img src="~@/assets/avatar.jpeg" alt="">
                </div>
                <p class="name">小小播放器</p>
            </div>
            <div class="menu">
                <div class="list">
                    <h4 class="menu-title">在线音乐</h4>
                    <div class="list-container">
                        <section
                            v-for="item in onlineMenu"
                            :class="['list-item', currentMenu === item.index ? 'active' : '']"
                            :key="item.icon"
                            @click="currentMenu = item.index"
                        >
                            <i :class="item.icon"></i>
                            <span>{{ item.label }}</span>
                        </section>
                    </div>
                </div>
                <div class="list">
                    <h4 class="menu-title">我的音乐</h4>
                    <div class="list-container">
                        <section
                            v-for="item in myMusicMenu"
                            :class="['list-item', currentMenu === item.index ? 'active' : '']"
                            :key="item.icon"
                            @click="currentMenu = item.index"
                        >
                            <i :class="item.icon"></i>
                            <span>{{ item.label }}</span>
                        </section>
                    </div>
                </div>
            </div>
        </section>

        <PlayBar></PlayBar>
    </div>
</template>

<script>
import PlayBar from "../components/PlayBar";

export default {
    components: {
        PlayBar
    },
    data() {
        return {
            currentMenu: "onlineMenu1",
            onlineMenu: [
                {label: "音乐馆", icon: "icon-yinyue", index: "onlineMenu1"},
                {label: "MV", icon: "icon-MV", index: "onlineMenu2"},
                {label: "个性电台", icon: "icon-diantai", index: "onlineMenu3"}
            ],
            myMusicMenu: [
                {label: "我喜欢", icon: "icon-xihuan", index: "myMusicMenu1"},
                {label: "本地和下载", icon: "icon-bendi1x", index: "myMusicMenu2"},
                {label: "播放历史", icon: "icon-lishi", index: "myMusicMenu3"}
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.main {
    height: 100vh;
    background: #f0f0f0;
    .aside-left {
        width: 200px;
        .user-info {
            padding-top: 30px;
            box-sizing: border-box;
            height: 150px;
            .avatar {
                text-align: center;
                font-size: 0;
                img {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    overflow: hidden;
                }
            }
            .name {
                text-align: center;
                font-size: 14px;
                color: #444;
                margin-top: 12px;
            }
        }
        .menu {
            padding: 0 16px;
            .list {
                .menu-title {
                    padding: 8px 0;
                    font-size: 12px;
                    cursor: default;
                }
                .list-item {
                    cursor: pointer;
                    font-size: 14px;
                    padding: 4px;
                    margin-bottom: 4px;
                }
                .active {
                    background: #5ec47b;
                    color: #fff;
                }
            }
        }
    }
}
</style>
